<template>
  <div class="tiwen">
    <div class="tiwen-content">
      <div class="tiwen-title">
        <h1 class="tiwen-h1">每日快报/体温快报</h1>
      </div>
      <h2 class="tiwen-time">2020年5月20日体温数据</h2>
      <div id="myChart" :style="{width: '990px', height: '400px'}"></div>
      <div class="tiwen-man">未提交体温名单</div>
      <div class="tiwen-table">
        <el-table
          :data="tableData"
          border
          style="width: 85%"
          :header-cell-style="{background:'#5058b1',color:'#fff'}"
        >
          <el-table-column type="index" label="#" width="50"></el-table-column>
          <el-table-column prop="college" label="学院" width="100"></el-table-column>
          <el-table-column prop="classes" label="班级" width="100"></el-table-column>
          <el-table-column prop="names" label="名单"></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import Api from "../assets/js/api";
export default {
  data() {
    return {
      tableData: []
    };
  },
  mounted() {
    //挂载完成 操作dom 发起axios请求
    this.drawLine();
    this.listdata(); //调用函数
    // this.draw();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        legend: {
          //两个按钮的数据
          data: ["未上报", "已上报"],
          x: "center",
          y: "30"
        },

        title: {
          text: "体温上报人数统计",
          left: "center"
        },
        xAxis: {
          type: "category",
          data: ["理工学院"]
        },
        yAxis: {
          type: "value"
        },

        tooltip: {
          //鼠标滑过时显示坐标轴信息
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985"
            }
          }
        },
        series: [
          {
            name: "未上报",
            type: "bar", // 树形图
            data: [26], // 数据 后端请求数据存储地方
            barWidth: 30, //柱形图宽度
            itemStyle: {
              normal: {
                color: "orange" //柱形图颜色
              }
            }
          },
          {
            name: "已上报", // 按钮柱形图
            type: "bar",
            data: [4], // 图表数据
            barWidth: 30,
            itemStyle: {
              normal: {
                color: "#4ad2ff"
              }
            }
          }
        ]
      });
    },
    listdata() {
      //获取体温快报数据
      this.$http({
        url: Api.datalist,
        mehtod: "GET"
      }).then(res => {
        console.log(res);
        this.tableData = res.data.list; //将请求的数据放到data数组中
      });
    }
  }
};
</script>
<style scoped>
.tiwen {
  padding: 20px;
  box-sizing: border-box;
}
.tiwen-content {
  width: 100%;
  border-radius: 12px;
  background-color: #ffffff;
}
.tiwen-h1 {
  font-size: 17px;
  color: #aba9d4;
  line-height: 55px;
}
.tiwen-title {
  height: 55px;
  width: 100%;
  padding-left: 20px;
  box-sizing: border-box;
  border-bottom: 1px solid #ececff;
  margin-bottom: 12px;
}
.tiwen-time {
  font-size: 20px;
  color: #5c6cae;
  margin-left: 20px;
}
.tiwen-man {
  font-size: 22px;
  color: #000;
  font-weight: bold;
  margin-left: 20px;
  margin-bottom: 20px;
}
.tiwen-table {
  margin-left: 20px;
  margin-bottom: 30px;
}
</style>

<style>
.tiwen-table /deep/ .el-table td,  
.el-table th.is-leaf,
.el-table--border,
.el-table--group {
  border-color: black;
}
.tiwen-table /deep/ .el-table th.is-leaf,
.el-table td {
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
}
.tiwen-table /deep/ .el-table--border::after,
.el-table--group::after,
.el-table::before {
  background-color: black;
}
</style>
